<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '审批列表',
  },
}
</route>
<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <!-- <view class="bolck" :style="{ height: sysInfo?.safeArea?.top + 'px', width: '100vw' }"></view> -->
  <view class="task_list" :style="{ paddingTop: listPadding + 'px', minHeight: minHeight }">
    <view class="tabbar">
      <wd-navbar style="minheight: 100rpx; color: #fff" title="审批列表" :bordered="false">
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
      </wd-navbar>
      <!-- <wd-tabbar title="任务列表" :bordered="false">
        <view class="flex flex-1 tabbar_c items-center justify-center">
          <view>任务列表</view>
        </view>
      </wd-tabbar> -->
      <view class="cu-bar search-container">
        <view class="search-form round">
          <myInput
            prefixIcon="search"
            clearable
            :inputBorder="false"
            confirm-type="search"
            @confirm="handleSearch"
            @clear="handleSearch"
            v-model:value="state.commonField"
            placeholder="请输入关键字搜索"
            @input="changeBillName"
          >
            <text
              class="filter-icon cuIcon-searchlist"
              @click="(filterIsShow = true), getTenantList()"
            ></text>
          </myInput>
        </view>
        <view class="action">
          <button @click="handleSearch()" class="cu-btn bg-gradual-green shadow-blur round">
            查询
          </button>
        </view>
      </view>
      <view class="tabs">
        <view
          v-for="(item, index) in tableList"
          :class="['item', 'i' + index, item.value === activeTab ? 'on' : '']"
          :key="item.value"
          @click="onTabChange(item.value)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>

    <view class="p3">
      <card
        v-for="(item, index) in dataList"
        :_type="item.state"
        :from="activeTab"
        :_D="item"
        :statusList="billStatusList"
        :key="index"
      ></card>
      <wd-loadmore
        :state="loadMore"
        finishedText="没有更多了"
        @reload="handleSearch()"
      ></wd-loadmore>
    </view>

    <wd-popup
      v-model="filterIsShow"
      position="bottom"
      :close-on-click-modal="false"
      custom-style="padding: 32rpx;border-top-left-radius:60rpx;border-top-right-radius:60rpx;"
      @close="handleClose"
    >
      <view class="cu-dialog" @click.stop="">
        <view class="cu-bar bg-white" style="min-height: 60rpx !important">
          <view class="action"></view>
          <view class="action mks" @click="filterIsShow = false">取消</view>
        </view>
        <view class="filter_container">
          <view class="block">
            <view class="label">发起人</view>
            <view class="row" @click="showSelectUser">
              <template v-if="selectList.length">
                <wd-tag
                  style="padding: 5rpx 10rpx; font-size: 26rpx; border-radius: 6rpx"
                  v-for="item in selectList"
                  :key="item.value"
                  type="primary"
                >
                  {{ item.personName }}
                </wd-tag>
              </template>
              <template v-else>
                <input
                  type="text"
                  :disabled="true"
                  v-model="state.startPersonCode"
                  placeholder="请输入"
                />
              </template>
            </view>
          </view>
          <view class="block">
            <view class="label">业务单号</view>
            <view class="row">
              <input type="text" v-model="state.businessCode" placeholder="请输入" />
            </view>
          </view>
          <!-- <view class="block">
            <view class="label">所属公司</view>
            <view class="row">
              <wd-select-picker
                style="width: 100%; background: #f7f7f7"
                v-model="state.tenantId"
                :columns="tenantList"
                type="radio"
              ></wd-select-picker>
              
            </view>
          </view> -->
          <view class="block">
            <view class="label">流程开始日期</view>
            <view class="row">
              <uni-datetime-picker
                type="date"
                return-type="string"
                v-model="state.startTime"
                placeholder="开始日期"
              />
              <!-- <wd-datetime-picker
                v-model="flowStartTime"
                :display-format-tab-label="displayFormatTabLabel"
              ></wd-datetime-picker> -->
            </view>
          </view>
          <view class="block">
            <view class="label">流程结束日期</view>
            <view class="row">
              <uni-datetime-picker
                type="date"
                return-type="string"
                v-model="state.endTime"
                placeholder="结束日期"
              />
            </view>
          </view>

          <view class="block" style="margin-top: 60rpx">
            <view class="row">
              <view class="btn" @click="resetFilter">重置</view>
              <view class="btn primary" @click="handleSearch()">查询</view>
            </view>
          </view>
        </view>
      </view>
    </wd-popup>
    <leaguerPicker
      :show="selectUserShow"
      :filtration="true"
      :checked="selectList"
      :nop="1"
      :returnDeptName="true"
      @hideModal="hideModal"
      @checkLeaguer="checkLeaguer"
    ></leaguerPicker>
  </view>
</template>
<script setup lang="ts">
import { queryTaskList, queryApplyList, queryCopyList, queryDoneList } from '@/service/task';
import { useSetting } from '@/stores/setting';
import { timestampToTime } from '@/utils/util';
import { queryTenantList } from '@/service/tenant';
import { useDict } from '@/hooks/dict';
import card from './components/card.vue';

// const card = defineAsyncComponent(() => import('./components/card.vue'));
const { bill_status } = useDict('bill_status');
const activeTab = ref('pending');
const state = reactive({
  current: 1,
  size: 20,
  commonField: '',
  startPersonCode: '',
  businessCode: '',
  endTime: '',
  startTime: '',
  tenantId: '',
  clientType: 1,
});
const setting = useSetting();
const sysInfo = uni.getSystemInfoSync();
const tabStatus = (sysInfo?.safeArea?.top || 0) + 50;
const listPadding = ref(tabStatus + 86);
const minHeight = ref(`calc(100vh - (${listPadding.value}px)`);
const selectUserShow = ref(false);
const selectList = ref([]);
const hideModal = () => {
  selectUserShow.value = false;
};
const billStatusList = computed(() => {
  const list = [];
  const colors = ['#108ee9', '#d46b08', '#87d068', '#f50', '', '', '', '', '', '#f50'];

  bill_status.value.map((item) => {
    const obj = {
      key: item.value,
      name: item.label,
      color: colors[item.value],
    };
    list.push(obj);
    return item;
  });
  return list;
});

const tenantList = ref([]);

const getTenantList = function () {
  queryTenantList({ tenantType: 2 }).then((res) => {
    tenantList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  });
};
const checkLeaguer = (e) => {
  if (e && e.length) {
    e.map((item) => {
      item.value = item.personCode;
      item.label = item.personName;
      return item;
    });
    selectList.value = e;
    state.startPersonCode = selectList.value[0].value;
  }
};
const showSelectUser = () => {
  getTenantList();
  selectUserShow.value = true;
};
const goBack = () => {
  uni.navigateBack();
};
const tableList = ref([
  {
    value: 'pending',
    name: '待审',
  },
  {
    value: 'done',
    name: '已审',
  },
  {
    value: 'apply',
    name: '我的发起',
  },
  {
    value: 'copy',
    name: '抄送给我',
  },
]);

const filterIsShow = ref(false);
const flowStartTime = ref(['', Date.now()]);
const dataList = ref([]);
const displayFormatTabLabel = (items) => {
  return `${items[0].label}年${items[1].label}月${items[2].label}日 ${items[3].label}:${items[4].label}`;
};
onShow(() => {
  state.current = 1;
  getDataList();
});
const changeBillName = (e) => (state.commonField = e);
const onTabChange = (e) => {
  activeTab.value = e;
  resetFilter();
  handleSearch();
};
const handleSearch = (e?) => {
  if (e !== undefined) {
    state.commonField = e;
  }
  state.current = 1;
  console.log(state.commonField, 1112);

  getDataList();
  filterIsShow.value = false;
};

const loadMore = ref<any>('finished');
const getDataList = () => {
  if (state.current === 1) {
    dataList.value = [];
  }
  const emun = [
    {
      name: queryTaskList,
      value: 'pending',
    },
    {
      name: queryApplyList,
      value: 'apply',
    },
    {
      name: queryCopyList,
      value: 'copy',
    },
    {
      name: queryDoneList,
      value: 'done',
    },
  ];
  let queryApi: any = '';
  const current = emun.find((item) => item.value == activeTab.value);
  if (current) {
    queryApi = current.name;
  } else {
    return;
  }
  // if (state.tenantId && state.tenantId.length) {
  //   state.tenantId = (state.tenantId as any).join(',');
  // }
  // const emun = [queryTaskList, queryApplyList, queryCopyList, queryDoneList];

  // const queryApi = emun[activeTab.value].name;
  console.log(state, 112);
  const params = { ...state };
  if (
    params.startTime &&
    new Date(params.startTime).getTime() > new Date(params.endTime).getTime()
  ) {
    uni.showToast({
      title: '开始时间不能大于结束时间',
      icon: 'none',
      mask: true,
    });
    return;
  }
  if (params.startTime && params.startTime.length < 18) {
    params.startTime += ' 00:00:00';
  }
  if (params.endTime && params.endTime.length < 18) {
    params.endTime += ' 23:59:59';
  }
  loadMore.value = 'loading';
  queryApi(params)
    .then((res) => {
      if (res.code !== 0) {
        loadMore.value = 'finished';
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        return;
      }
      dataList.value = dataList.value.concat(res.data.records);
      if (res.data.current < res.data.pages) {
        loadMore.value = 'loadEnd';
      } else {
        loadMore.value = 'finished';
      }
    })
    .catch((err) => {
      console.log(err);
      loadMore.value = 'finished';
      uni.showToast({
        title: err.data?.msg || err.msg,
        icon: 'none',
      });
    });
};
const handleClose = () => {
  filterIsShow.value = false;
};
const resetFilter = () => {
  // flowStartTime.value = ['', Date.now()];
  selectList.value = [];
  // eslint-disable-next-line no-restricted-syntax
  for (const key in state) {
    if (key !== 'current' && key !== 'size') {
      state[key] = '';
    }
  }
};
onReachBottom(() => {
  if (loadMore.value === 'loadEnd') {
    state.current += 1;
    getDataList();
  }
});
</script>
<style scoped lang="scss">
.tabbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.tabbar_c {
  height: 100%;
  font-weight: 800;
  color: white;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.bolck {
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.task_list {
  background: #f7f7f7;
}

.cu-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}

.cu-bar .search-form {
  display: flex;
  flex: 1;
  align-items: center;
  height: 64rpx;
  margin: 0 30rpx;
  overflow: hidden;
  /* padding: 0 40rpx; */
  font-size: 24rpx;
  line-height: 64rpx;
  color: #333;
  background-color: #f5f5f5;
}

.search-container .filter-icon {
  padding: 0 18rpx;
  margin: 0;
  font-size: 40rpx;
  color: #007aff;
  border-left: 1rpx solid #f3f3f3;
}

.round {
  border-radius: 2500px;
}

.cu-bar .search-form + .action {
  margin-right: 30rpx;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
}

.search-container .action .cu-btn {
  padding: 0 24rpx;
}

.bg-gradual-green {
  color: #fff;
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
}

.cu-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  padding: 0 30rpx;
  margin-right: initial;
  margin-left: initial;
  overflow: visible;
  font-size: 28rpx;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 0;
  transform: translate(0, 0);
}

.tabs {
  display: flex;
  justify-content: space-between;
  padding: 0 50rpx;
  margin-top: 15rpx;

  .item {
    position: relative;
    padding: 15rpx 0;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
    opacity: 0.5;
    transition: all 0.3s;

    &.on {
      opacity: 1;

      &::after {
        position: absolute;
        bottom: -8rpx;
        left: 50%;
        width: 12rpx;
        height: 12rpx;
        content: '';
        background: #f1f1f1;
        border-radius: 50%;
        transform: translate(-50%);
      }
    }
  }
}

// :deep(.wd-navbar) {
//   background: inherit;
// }

.cu-dialog {
  font-size: 28rpx;
}

.cu-dialog > .cu-bar:first-child .action {
  margin-right: 20rpx;
}

.filter_container {
  padding: 10rpx 32rpx 32rpx;
  padding-bottom: 64rpx;
  text-align: left;
  background-color: #fff;

  .block {
    ~ .block {
      margin-top: 32rpx;
    }

    .label {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .date-picker {
      flex: 1;
      padding: 16rpx;
      text-align: center;
      background-color: #f7f7f7;
      border-radius: 8rpx;
    }

    .select-box {
      flex: 1;
      padding: 16rpx;
      background-color: #f7f7f7;
      border-radius: 8rpx;

      :deep(.select-row) {
        padding: 0;
        background: none;
      }
    }

    input {
      flex: 1;
      height: 33rpx;
      padding: 16rpx 12rpx;
      font-size: 26rpx !important;
      background-color: #f7f7f7;
      border: 1rpx solid #f7f7f7;
      border-radius: 8rpx;

      .input-placeholder {
        color: #8a929f;
      }
    }

    .btn {
      flex: 1;
      padding: 16rpx;
      color: #999;
      text-align: center;
      background-color: #f7f7f7;
      border: 1rpx solid #dedede;
      border-radius: 8rpx;

      ~ .btn {
        margin-left: 24rpx;
      }

      &.primary {
        color: #fff;
        background-color: #007aff;
        border-color: #007aff;
      }
    }
  }
}

:deep(.wd-navbar__left--hover) {
  background: none;
}
</style>
